<template>
  <div class="payCard" style="width: 48%">
    <div class="pay-img">
      <a href="#" @click.prevent="handel(item.id)">
        <img :src="$filters.formatImgSize(item.picUrl, 300)" alt="404" />
      </a>
      <span class="time" v-if="timeShow">{{ $filters.formatTime(time) }}</span>
    </div>
    <div class="content">
      <p class="title">
        <a href="#">{{ item.name }}</a>
      </p>
      <p>{{ item.rcmdText || item.rcmdtext }}</p>
      <slot name="count">
        <p>{{ item.lastProgramName }}</p>
      </slot>
      <p class="price" v-if="priceShow">￥{{ item.originalPrice / 100 }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import { getAnchorDetail } from '@/service/find-music/anchor-station'
import { useRouter } from 'vue-router'

const router = useRouter()
const props = defineProps({
  timeShow: {
    type: Boolean,
    default: true
  },
  priceShow: {
    type: Boolean,
    default: true
  },
  item: {
    type: Object,
    required: true
  }
})

const handel = (id: number) => {
  router.push({
    path: '/main/anchor',
    query: {
      id: id,
      type: 'anchor'
    }
  })
}
const time = ref(0)
function getAnchorTime(id: number) {
  getAnchorDetail(id).then((res: any) => {
    time.value = res.data.lastProgramCreateTime
  })
}
getAnchorTime(props.item.id)
</script>

<style scoped lang="less">
.payCard {
  margin-top: 10px;
  padding-bottom: 8px;
  display: flex;
  border-bottom: 1px solid #ccc;

  .pay-img {
    position: relative;
    width: 28%;
    margin-right: 8px;

    img {
      width: 100%;
      min-width: 111px;
      min-height: 134px;
    }
    .time {
      position: absolute;
      width: 100%;
      bottom: 3px;
      left: 0;
      background-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0.02)
      );
      font-size: 12px;
      color: #fff;
      padding: 5px 0 3px 5px;
      box-sizing: border-box;
    }
  }

  .content {
    p {
      font-size: 13px;
      color: #999;
      margin-bottom: 13px;
      padding-left: 5px;
    }
    p.title {
      margin: 8px 0 20px 0;
      a {
        color: #666;
        font-size: 16px;
      }
    }
    .price {
      color: #44b1fb;
      font-size: 16px;
      margin-top: 2px;
    }
  }
}
</style>
